import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "./assets/css/base.css";
import "./assets/css/el-rest.css";
import subMenu from "qf-sub-menu";
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

Vue.use(ElementUI);
Vue.use(subMenu);
Vue.config.productionTip = false;

// 全局前置钩子(路由守卫)
router.beforeEach((to, from, next) => {
  NProgress.start() // 进度条出现
  // to 即将进入的路由
  // from 即将离开的路由
  // next 放行

  // 除了登录页，其他页面在没有登录的情况下都不允许访问

  // 判断本地存储中是否有token
  // 如果有就放行 如果没有就跳转到登录页
  let token = localStorage.getItem("qf-token") || ""
  if (token) { // 能获取到说明已经登陆 放行
    // 判断store中的sidemenu是否为空数组 如果为空 就要获取用户菜单
    if (store.state.sideMenu.length === 0) {
      store.dispatch('GET_MENULIST') // 函数加了async 会变成一个promise 处于pending状态
        .then(() => {
          next({
            path: to.path
          }) // 这里面要注意 next里面要传参数即要进入页面的路由信息，因为next传参之后
          //当前要进入的路由会被废止，转而进入参数对应的路由，确保addRoutes生效
        })
    } else {
      next()
    }
    // next()
  } else {
    // 没有登入 判断访问的是否为登录页
    if (to.path !== "/login") {
      // 跳转到登录页
      next({
        path: "/login"
      })
    } else {
      // 放行
      next()
    }
  }
})
router.afterEach((to, from) => { // 全局的后置钩子
  NProgress.done() // 进度条消失
  let matched = [...to.matched] // 浅拷贝到一个新数组
  matched.splice(0, 1)
  // console.log(matched);
  store.commit("SET_BREADCRUMB",matched)
})

// 按钮键权
Vue.directive("has" ,{
  inserted(el,binding){
    let permission = localStorage.getItem('permissionButtons') || '[]'
    permission = JSON.parse(permission)
    if(!permission.includes(binding.value)){
      // 保存原先的类名
      let elClassName = el.className
      // 用原来的类名+is-disabled触发禁用样式
      el.className = elClassName+" "+"is-disabled"
      // 禁用按钮
      el.disabled = true
    }
  }
})

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");